<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin:0px;
			padding:0px;
		}
		#wrap{
			position:relative;
			width:1155px;
			height:450px;
			margin:50px auto;
			border: 1px solid #000;
		}
		#wrap ul li{
			position:relative;
			z-index:1000;
			list-style:none;
			width:230px;
			height:150px;
			border-right:1px dotted #ccc;
			border-bottom:1px dotted #ccc;
			float:left;
			background:url("images/clients.png");
			transition:1s;
		}
		#wrap ul li.last{
			border-bottom:none;
		}
		#box{
			position:absolute;
			left:0px;
			top:0px;
			z-index:10;
			width:230px;
			height:150px;
			background:rgba(0,0,0,.4);
			transition:1s;
		}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul>
				<li style="background-position:0px 0px;"></li>
				<li style="background-position:-230px 0px;"></li>
				<li style="background-position:-460px 0px;"></li>
				<li style="background-position:-690px 0px;"></li>
				<li style="background-position:-920px 0px;"></li>
				<li style="background-position:-1150px 0px;"></li>
				<li style="background-position:-1380px 0px;"></li>
				<li style="background-position:-1610px 0px;"></li>
				<li style="background-position:-1840px 0px;"></li>
				<li style="background-position:-2070px 0px;"></li>
				<li class="last" style="background-position:-2300px 0px;">
				</li>
				<li class="last" style="background-position:-2530px 0px;"></li>
				<li class="last" style="background-position:-2760px 0px;"></li>
				<li class="last" style="background-position:-2990px 0px;"></li>
				<li class="last" style="background-position:-3220px 0px;"></li>
			</ul>
			<div id="box"></div>
		</div>
		<script>
			//获取到所有的li标签
			var oLi = document.getElementsByTagName("li");
			//获取class=box的这个div
			var box = document.getElementById("box");
			//通过循环来获取每个li绑定鼠标滑动事件
			for (var i=0;i<oLi.length ;i++ )
			{
				//给每个li绑定鼠标滑动事件
				oLi[i].onmousemove = function(){
					//获取鼠标滑上去的li的位置
					//this 鼠标划到哪个li上面就代表哪个li
					//鼠标滑动到谁上面就改变谁的背景位置
					this.style.backgroundPositionY = "-150px";
					var _left = this.offsetLeft;//鼠标滑上去的li与父元素左边的距离
					var _top = this.offsetTop;//鼠标滑上去的li与父元素上端的距离
					//把鼠标滑上去的li的距离赋值给box
					box.style.left = _left + "px";
					box.style.top = _top + "px";
				}
				oLi[i].onmouseout = function(){//鼠标离开Li实现什么动画
					this.style.backgroundPositionY = "0px";
				}
			}
		</script>
	</body>
</html>